使用vue实现超级课程表的功能【附完整源码】 |
您所在的位置：网站首页 › 排课模板 拖拽 › 使用vue实现超级课程表的功能【附完整源码】 |
使用vue实现超级课程表的功能【附完整源码】
|
效果图展示： 代码实现： 封装一个超级课程表组件ClassTable如下： {{item?'周'+item:''}} {{changeCharacter(index)}} {{innerItem.lessonsName}} {{innerItem.lessonsTime}} var that; import { Dialog } from "vant"; export default { props: { classTableData: { type: Object } }, computed: { // 将数字转换成汉字 changeCharacter(num) { return function(num) { var digArr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var characterArr = [ "一", "二", "三", "四", "五", "六", "七", "八", "九" ]; return characterArr[num]; }; } }, methods: { // 查看该课程的相关详情 toScanDetail(item, idx) { var con = `课程名称：${item.lessonsName}上课时间：${item.lessonsTime}上课地点：${item.lessonsAddress}授课老师：${item.lessonsTeacher}课程课时：${item.lessonsRemark}`; if (item.lessonsName) { Dialog.alert({ message: con }); } } } }; * { margin: 0; padding: 0; } .table-wrapper { width: 100%; overflow: auto; margin-bottom: 60px; } table { table-layout: fixed; width: 100%; border-collapse: collapse; color: #677998; } thead { background: #d4f7fd; } th { font-weight: normal; height: 46px !important; } tbody { font-size: 12px; } th, td { text-align: center; height: 80px; border-right: 1px solid #fefefe; border-bottom: 1px solid #fefefe; } tr td div { background: #a5d16d; width: 100%; height: 100%; color: #efefef; border-radius: 10px; padding: 5px; box-sizing: border-box; } tr td:first-child { color: #333; } .course { background-color: #ebbbbb; color: #fff; display: inline-block; border-radius: 3px; width: 47%; margin: 1px 1%; } .bgColor { background-color: #89b2e5; }使用该组件如下： var that; import ClassTable from "../../components/ClassTable"; import { reqFindTeacherLesson } from "../../config/api"; export default { data() { return { msg: "", classTableData:{ weeks: ["", "一", "二", "三", "四", "五","六","日"], courses: [], } }; }, components: { "v-ClassTable": ClassTable }, created() { const { userId, userName, roleId } = JSON.parse( this.$cookie.get("userInfo") ); this.findTeacherLesson(userName); }, methods: { // 查询教师课表 async findTeacherLesson(userName) { that = this; var params = { userName: userName }; const { msg, status, info } = await reqFindTeacherLesson(params); that.classTableData.courses = info; } } };接口返回的数据格式如下： { "msg": "查询成功", "status": 1, "info": [ [ { "id": 1, "classId": 2, "lessonsTime": "8:00-9:40", "lessonsName": "计算机导论", "lessonsAddress": "二教302", "lessonsTeacher": "吴老师", "lessonsRemark": "1-17周", "lessonsNumber": "一", "weekday": "星期一" }, { "id": 19, "classId": 2, "lessonsTime": "8:00-9:40", "lessonsName": "编译原理", "lessonsAddress": "二教302", "lessonsTeacher": "吴老师", "lessonsRemark": "1-5,8-12周", "lessonsNumber": "一", "weekday": "星期四" }, ], [{},{},{}], [{},{},{}] ] } |
实现思路： （1）使用table表格实现的 （2）接口数据需要返回一个二位数组即可。【本文地址】